<template>
	<view class="container padding-top-sm">
		<view
			class="margin-left-sm radius5 bg-white margin-right-sm padding-top padding-left-sm padding-right-sm padding-bottom">
			<view class="text-15 text-333">
				服务信息
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 66rpx;">
				<view class="text-999">
					收货人姓名
				</view>
				<view class="text-333">
					{{info.userName}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					收货人电话
				</view>
				<view class="text-333">
					{{info.userMobile}}
				</view>
			</view>
			<view v-if="info.serviceType==2" class="flex justify-between align-center text-df" style="margin-top: 66rpx;">
				<view class="text-999">
					发货人
				</view>
				<view class="text-333">
					{{info.fromUserName}}
				</view>
			</view>
			<view v-if="info.serviceType==2" class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					发货人电话
				</view>
				<view class="text-333">
					{{info.fromUserMobile}}
				</view>
			</view>
			<view v-if="info.serviceType!=2" class="flex justify-between align-center text-df"
				style="margin-top: 40rpx;" @click="toNavigation(info.addressLatitude,info.addressLongitude)">
				<view class="text-999">
					工作地址
				</view>
				<view class="text-333 text-cut-2 text-right" style="width: 270rpx;">
					{{info.addressFormatted}}
				</view>
			</view>
			<view class="" v-else>
				<view @click="toNavigation(info.addressLatitude,info.addressLongitude)" class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
					<view class="text-999">
						取货地址
					</view>
					<view class="text-333 text-cut-2 text-right" style="width: 270rpx;">
						{{info.addressFormatted}}
					</view>
				</view>
				<view @click="toNavigation(info.deliveryLatitude,info.deliveryLongitude)" class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
					<view class="text-999">
						配送地址
					</view>
					<view class="text-333 text-cut-2 text-right" style="width: 270rpx;">
						{{info.deliverFormatted}}
					</view>
				</view>
			</view>

			<view v-if="info.serviceType!=4" class="flex justify-between align-center text-df"
				style="margin-top: 40rpx;">
				<view class="text-999">
					预付金额
				</view>
				<view class="color">
					<text class="text-sm">¥</text>
					<text class="text-17">{{parseFloat(info.price/100).toFixed(2)}}</text>
				</view>
			</view>
		</view>
		<view class="margin-sm radius5 bg-white padding-top padding-left-sm padding-right-sm padding-bottom">
			<view class="text-15 text-333">
				客户描述
			</view>
			<view class="text-13 text-666" style="margin-top: 66rpx;">
				{{info.description}}
			</view>
			<view class="flex justify-start flex-wrap">
				<image :src="item" mode="" class="i-img margin-top" v-for="(item,index) in descriptionPic"
					:class="{'margin-left-sm':(index+3)%3!=0}" @click="ViewImage(item)"></image>
			</view>
		</view>
		<view class="margin-sm radius5 bg-white padding-top padding-left-sm padding-right-sm padding-bottom">
			<view class="text-15 text-333">
				订单信息
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 66rpx;">
				<view class="text-999">
					订单编号
				</view>
				<view class="text-333">
					{{info.serviceNo}}
				</view>
			</view>
			<view class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					下单时间
				</view>
				<view class="text-333">
					{{info.createTime}}
				</view>
			</view>
			<view v-if="info.serviceType!=4" class="flex justify-between align-center text-df" style="margin-top: 40rpx;">
				<view class="text-999">
					支付方式
				</view>
				<view class="text-333">
					{{info.payType==1?'余额支付':'微信支付'}}
				</view>
			</view>
		</view>
		<button v-if="info.serviceType==3" @click="toPage('/filePage/pages/bidding/bidding?orderServiceId=' + id)"
			class="bg-color padding text-white radius10 margin-left-sm margin-right-sm btn text-15">
			我要竞标
		</button>
		<button @click="handOrderUpdate" v-else
			class="bg-color padding text-white radius10 margin-left-sm margin-right-sm btn text-15">

			我要抢单
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: this.$config.baseUrl,
				info: {},
				id: '',
				descriptionPic: []
			};
		},
		onLoad(options) {
			// console.log(options)
			if (options.id) {
				this.id = options.id

			}
			if (options.serviceType) {
				if (options.serviceType == 1) {
					uni.setNavigationBarTitle({
						title: '普通订单'
					})
				} else if (options.serviceType == 2) {
					uni.setNavigationBarTitle({
						title: '配送订单'
					})
				} else if (options.serviceType == 3) {
					uni.setNavigationBarTitle({
						title: '竞标订单'
					})
				} else {
					uni.setNavigationBarTitle({
						title: '大屏订单'
					})
				}

			}
			this.getDetadil()
		},
		methods: {
			toPage(url) {
				let that = this
				uni.getStorage({
					key: 'userInfo',
					success: function(res) {
						if(res.data.mechanicStatus){
							that.$util.openNewPage(url)
						}else{
							that.$util.msg('无权限竞标')
						}
						
					}
				})
				
			},
			async getDetadil() {
				const [err, res] = await this.$get(this.$api.orderService_detail, {
					id: this.id
				})
				if (res) {
					this.info = res.data
					if (res.data.descriptionPic) this.descriptionPic = res.data.descriptionPic.split(',')


					// console.log(res)

				}
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.descriptionPic,
					current: e
				});
			},
			handOrderUpdate() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '你确定抢单吗',
					success: function(res) {
						if (res.confirm) {
							that.$get(that.$api.orderUpdate, {
								orderServiceId: that.id
							}).then(res => {
								const [err, rs] = res
								if (rs) {
									uni.hideToast()
									that.$util.msg(rs.message)
									setTimeout(()=>{
										uni.navigateBack()
									},1500)
									
								}
							})

						} else if (res.cancel) {

						}
					}
				});
			},
			toNavigation(q,w){
				uni.openLocation({
				            latitude: parseFloat(q),
				            longitude: parseFloat(w),
				            success: function () {
				                console.log('success');
				            }
				        });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.i-img {
		width: 180rpx;
		height: 180rpx;
		min-width: 180rpx;
	}

	.btn {
		margin-top: 88rpx;
		margin-bottom: 96rpx;
	}
</style>
